<script setup lang="ts">
import comswiper from "@/components/swiper.vue"
import {Swiper, SwiperSlide} from 'swiper/vue';
import 'swiper/swiper-bundle.css';
import {Autoplay} from "swiper/modules";
import {onMounted, ref, reactive, onBeforeUnmount} from "vue";
import scrollReveal from 'scrollreveal';
import {retBottomScroll, retRightScroll, retLeftScroll} from '@/utils/scroll.js'
import {useRouter} from "vue-router";
import {
  getaboutinfo,
  getAdvantageinfo,
  getbanners,
  getCaselist,
  geThzhblist,
  getlxinfo,
  getprodcolorinfo,
  getsmprodcatelist,
  geTteaminfo,
  PsotAddmessgeinfo,
  vedioinfo
} from "@/axios/api.js"

const data: any = reactive({
  scrollReveal: scrollReveal(),
})
let router = useRouter();
let swiperInstance = ref(null);//轮播图实例
let mySwiper = ref<any>(null);//轮播图实例
let mySwiper1 = ref<any>(null);//轮播图实例
let mySwiper2 = ref<any>(null);//轮播图实例
let slidesPerView = ref<number>(3)
let slidesPerView1 = ref<number>(3)
let swiperIndex = ref(0)
let psdShow = ref<boolean>(false)//头部控件
let nums = ref<number>(100)
let numsTab = ref<number>(0)
let play = ref(true)
let video = ref(null) //通过ref绑定视频对象
let scrol = ref("section1")
let select = ref(false)

let getbannersVal: any = ref({
  content: "",
  title: "",
  image: "",
  brief: ""
})
let getaboutinfoVal: any = ref({
  content: "",
  title: "",
  image: "",
  brief: ""
})
let froms: any = reactive({
  username: "",
  tel: "",
  content: ""
})
let geTteaminfosVal: [any] = ref([])//团队
let getCaselistsVal: [any] = ref([])
let geThzhblistVal: [any] = ref([])//合作伙伴
let getlxinfosVal: [any] = ref({
  contact: {
    address: "石家庄市新华区赵陵路15号 都市阳光3-1-101",
    company: "",
    email: "beiweisanshi@126.com",
    hottel: "",
    lxr: "刘先生",
    lxr2: "刘先生",
    postcode: "",
    sytel: "",
    tel: "186 1816 1781",
    tel2: "186 1816 1781",
  },
  token: "c7c9baf04b358e79d8e8d45cb93bd6f7",
  website: {
    expirationtime: "14400000",
    logo: "",
    site_code: "",
    partner: "0",
    site_copyright: " © 2024 BEIWEISANSHI CO.,LTD.",
    site_description: "",
    site_icp: "鲁ICP备xxxx号",
    site_keywords: "",
    site_name: "",
    site_title: "",
    team: "0",
    sumarynum: "160",
    website: "http://wdemo34.wyoucms.cn/",
    weixin: "http://wdemo34.wyoucms.cn//upload/image/20241113/7ffed9155958652f29d3691b1444b6db.jpg",
    xcx: "",
  }
})//联系方式
let getprodcolorinfoVal = ref([
  {
    category_name: '点工的诞生'
  },
  {
    category_name: '点工的优势'
  },
  {
    category_name: '点工的功能'
  },
  {
    category_name: '点工的权益'
  },
  {
    category_name: '点工的憧憬'
  },
  {
    category_name: '点工的未来'
  }
])//颜色
let videourl = ref("")
const autoplayOptions = reactive({
  delay: 3000,
  disableOnInteraction: false // 继续轮播
});
let plyr = ref(null)
let innerWidth = ref<number>(0)
// 定义props
let swiperList = ref<any>([])
import home_1 from "@/assets/img/home_1.png";
import home_2 from "@/assets/img/home_2.png";
//获取背景图
const gesgetbanner = () => {
  // getbanners().then((res: any) => {
  //   swiperList.value = res.data.data
  // })
  swiperList.value = [
    {
      // image:'http://hwy071.qdytcy.cn/home_1.png'
      image: home_1
      // imageUrl: require('@/assets/img/home_1.png')
    },
    {
      image: home_2
      // image: '../../assets/home_2.png'
      // image:'http://hwy071.qdytcy.cn/home_2.png'
    }
  ]
}
//获取企业简介
const getaboutinfs = () => {
  getaboutinfo().then((res: any) => {
    getbannersVal.value = res.data.data
  })
}
//获取优势
const getAdvantageinfos = () => {
  getAdvantageinfo().then((res: any) => {
    getaboutinfoVal.value = res.data.data
  })
}
//获取团队
const geTteaminfos = () => {
  geTteaminfo().then((res: any) => {
    geTteaminfosVal.value = res.data.list
  })
}
//获取案例
const getCaselists = () => {
  getCaselist().then((res: any) => {
    getCaselistsVal.value = res.data.data
  })

}
//获取合作伙伴
const geThzhblists = () => {
  geThzhblist().then((res: any) => {
    geThzhblistVal.value = res.data.data
  })
}

//预约大理石
const PsotAddmessgeinfos = () => {
  if (froms.username == "") {
    alert("请输入姓名")
    return
  }
  if (froms.tel == "") {
    alert("请输入电话")
    return
  }
  if (froms.content == "") {
    alert("请输入内容")
    return
  }
  alert("信息获取成功")
  return
  PsotAddmessgeinfo(froms).then((res: any) => {
    if (res.data.code == 200) {
      alert("信息获取成功")
    }
  })
}
//联系方式
const getlxinfos = () => {
  getlxinfo().then((res: any) => {
    getlxinfosVal.value = res.data.data
  })
}
//颜色
// const getprodcolorinfos = () => {
//   getprodcolorinfo().then((res: any) => {
//     getprodcolorinfoVal.value = res.data.list
//   })
// }
//视频
const vedioinfos = () => {
  vedioinfo().then((res: any) => {
    videourl.value = res.data.data.videourl
    setTimeout(() => {
      plyr.value.player.muted = true; // 设置静音
      plyr.value.player.play().catch((err) => {
        console.error("播放失败：", err);
      });
    }, 1500);

  })
}
vedioinfos()
// getprodcolorinfos()
getlxinfos()
geThzhblists()
getCaselists()
geTteaminfos()
getAdvantageinfos()
getaboutinfs()
gesgetbanner()
// 保存 swiper 实例
const onSwiper = (swiper: any) => {
  mySwiper.value = swiper;
  swiperInstance.value = swiper;
};
// 保存 swiper 实例
const onSwiper1 = (swiper: any) => {
  mySwiper1.value = swiper;
};
const onSwiper2 = (swiper2: any) => {
  mySwiper2.value = swiper2;
};
const updateWidth = () => {
  innerWidth.value = window.innerWidth;
  if (innerWidth.value < 600) {
    slidesPerView.value = 2
    slidesPerView1.value = 2
  }
};
//播放视频
const videoPlay = async () => {
  await video.value.play()
  play.value = false
}
//暂停视频
const videoPause = async () => {
  await video.value.pause()
  play.value = true
}
//控件
const goToSlide = (item: any) => {
  if (innerWidth.value > 600) {
    let fullUrl = window.location.origin;
    window.open(fullUrl + `/#/stone?id=${item.id}&name=${item.category_name}`);
  } else {
    router.push({path: "/stone", query: {id: item.id, name: item.category_name}})
  }
}
//切换至那一张下标
const updateIndex = (e: any) => {
  swiperIndex.value = e.realIndex; // 更新当前幻灯片的索引
}
//触摸显示色系
const mouseNums = (index: number) => {
  if (innerWidth.value > 600) {
    nums.value = index;
  }

}
//选择色系类
const handleNumsTab = (index: number) => {
  numsTab.value = index;
  router.push("/stone")
}
//进入详情
const handleTo = (a: any) => {
  let fullUrl = window.location.origin;
  window.open(fullUrl + `/#/stone?id=${a.id}&name=${a.category_name}`);
  // router.push({path:"/stone",query:{ id:a.id,name:a.category_name }})
}
const handlePsd = () => {
  psdShow.value = !psdShow.value;
}
const handleStart = () => {
  mySwiper.value.slidePrev()
}
const handleNext = () => {
  mySwiper.value.slideNext()
}
const handleStart1 = () => {
  mySwiper1.value.slidePrev()
}
const handleNext1 = () => {
  mySwiper1.value.slideNext()
}
const handleStart2 = () => {
  mySwiper2.value.slidePrev()
}
const handleNext2 = () => {
  mySwiper2.value.slideNext()
}

const scrollTo = (sectionId: string) => {
  const section = document.getElementById(sectionId);
  if (section) {
    scrol.value = sectionId
    psdShow.value = false;
    section.scrollIntoView({behavior: 'smooth'});
  }
}

const value = ref('')
const options = ref([])
const getsmprodcatelists = () => {
  getsmprodcatelist().then((res: any) => {
    options.value = res.data.list
  })
}
const changeSelect = () => {
  console.log(innerWidth.value)
  if (innerWidth.value > 600) {
    let item = options.value[value.value]
    let fullUrl = window.location.origin;
    window.open(fullUrl + `/#/particulars?id=${item.id}&name=${item.category_name}`);
  } else {
    router.push({path: "/particulars", query: {id: item.id, name: item.category_name}})
  }

}
let playerOptions = reactive({
  autoplay: true,
  controls: ['play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'], // 自定义控件
  muted: true,
  loop: {active: true}
})

const download = (url: string) => {
  // window.location.href = 'http://www.dgkeji.cn/app/dg.apk'
  window.open(url)
}
getsmprodcatelists()
onMounted(() => {
  retBottomScroll(data)
  retLeftScroll(data)
  retRightScroll(data)
  innerWidth.value = window.innerWidth;
  if (innerWidth.value < 600) {
    slidesPerView.value = 2
    slidesPerView1.value = 2
  }
  window.addEventListener('resize', updateWidth);
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', updateWidth);
});
</script>

<template>
  <div class="home" @click="select=false">
    <div class="home-header Flex Flex_J_Sb" id="section1">
      <div class="home-header-left">
        <div class="left Color_ffffff Hover_scale" @click="handlePsd">
          <div class="left-1 Font_size32 Flex Flex_J_C Flex_A_C">
            <img src="@/assets/img/logo.png" alt="">
            <!-- <img src="http://www.yuebai.shop/img/yuebai.png" alt=""> -->
          </div>
          <div class="left-2">
            <img src="@/assets/img/zhankai.png" alt="">
          </div>
        </div>
        <div class="cent">
          <div class="cent-1 Font_size18 Color_8A8A8A">
            <!-- 石材定制专家 -->
          </div>
          <!-- <div class="cent-2"></div> -->
          <div class="cent-3">
            <div class="cent-3-1 Hover_scale" @click="handleStart">
              <img class="cent-3-1-img" src="@/assets/img/end.png" alt="">
              <img class="cent-3-1-img2" src="@/assets/img/add.png" alt="">
            </div>
            <div class="cent-3-2 Hover_scale" @click="handleNext">
              <img class="cent-3-1-img" src="@/assets/img/end.png" alt="">
              <img class="cent-3-1-img2" src="@/assets/img/add.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="home-header-right">
        <Swiper
            :modules="[Autoplay]"
            :autoplay="autoplayOptions"
            :slides-per-view="1"
            loop
            @slideChange="updateIndex"
            @swiper="onSwiper"
            v-if="swiperList.length>0"
        >
          <swiper-slide v-for="(item, index) in swiperList" :key="index">
            <div class="swiper-slide-home  flex flex-col justify-center items-center px-4">
              <img :src="item.image" alt="">
            </div>
          </swiper-slide>
        </Swiper>
        <!-- <div class="home-header-select" v-show="select">
          <el-select
              v-model="value"
              filterable
              placeholder="请输入石材"
              style="width: 240px"
              @change="changeSelect"
              @click.stop
          >
            <el-option
                v-for="(item,index) in options"
                :key="item.id"
                :label="item.category_name"
                :value="index"
            />
          </el-select>
        </div>
        <div class="home-header-peg Flex">
          <div class="home-header-peg-img Hover_scale" @click.stop="select=!select">
            <img src="@/assets/img/sousuo.png" alt="">
          </div>
          <div class="home-header-peg-img Hover_scale">
            <img src="@/assets/img/wb.png" alt="">
          </div>
          <div class="home-header-peg-img Hover_scale">
            <img src="@/assets/img/wx.png" alt="">
          </div>
          <div class="home-header-peg-img Hover_scale">
            <img src="@/assets/img/qq.png" alt="">
          </div>
        </div> -->
        <div class="home-header-right-pos1">
          <img src="@/assets/img/home.png" alt="">
        </div>
        <div class="home-header-s Font_size38 Color_ffffff letterSpacing4 fontWeight100">
          <span>{{
              (swiperIndex + 1) < 10 ? `0${swiperIndex + 1}` : swiperIndex + 1
            }}<span class="Font_size24">/{{ swiperList.length < 10 ? `0${swiperList.length}` : swiperList.length }}
          </span></span>
        </div>
        <div class="home-header-right-pos3">
          <img src="@/assets/img/mous.png" alt="">
        </div>
        <div class="home-header-right-pos2 Flex">
          <div class="pos2-box Flex fontWeight100">
            <div class="pos2-text Font_size20 Hover_scale Color_ffffff"
                 v-for="(a,index) in getprodcolorinfoVal" :key="a.id">{{ a.category_name }}
            </div>
            <div class="pos2-text1 Font_size20 Hover_scale Color_ffffff"
                 v-for="(a,index) in getprodcolorinfoVal" :key="a.id">{{ a.category_name }}
            </div>
          </div>
        </div>
      </div>
      <transition name="slide">
        <div class="home-header-right-pod Flex Flex_J_Sb" v-show="psdShow">
          <div class="home-header-right-pod-l Font_size64 Color_ffffff07">
            <p class="fontFamilyR titles" @click="scrollTo('section2')">
              <!-- <span class="en">
                INTRODUCTION
              </span> -->
              <span class="cn">
                关于我们
              </span>
            </p>
            <p @click="scrollTo('section3')"
               class="fontFamilyR Margin_T30 titles">
              <!-- <span class="en">
                STONEDISPLAY
              </span> -->
              <span class="cn">
                功能介绍
              </span>
            </p>
            <p @click="scrollTo('section4')"
               class="Margin_T30 fontFamilyR titles">
              <!-- <span class="en">
                OUR TEAM
              </span> -->
              <span class="cn">
                我们团队
              </span></p>
            <!-- <p @click="scrollTo('section5')"
               class="Margin_T30 fontFamilyR titles">
              <span class="en">
                PARTNERS
              </span>
              <span class="cn">
                合作伙伴
              </span>
            </p> -->
            <p @click="scrollTo('section6')"
               class="Margin_T30 fontFamilyR titles">
              <!-- <span class="en">
                 LATEST CASES
              </span> -->
              <span class="cn">
                预约留言
              </span>
            </p>
          </div>
          <div class="Color_ffffff">
            <div class="Font_size17">
              关于我们
            </div>
            <div class="lujing Margin_T50"></div>
            <div class="Font_size17 Margin_T50">
              <span>合作专线:</span>
            </div>
            <div class="Font_size24 fontFamilyR Margin_T12">
              <span>13732007083 （同微信） 刘女士</span>
            </div>
            <div class="Font_size17 Margin_T80">
              <span>公司地址: 浙江省温州市永嘉县瓯北街道柏悦嘉园</span>
            </div>
            <div class="Font_size17 Margin_T20">
              <span>邮箱： 330731617@qq.com</span>
            </div>
            <div class="Font_size17 Margin_T20">
              <span>{{ getlxinfosVal.website.website }}</span>
            </div>
            <div class="Font_size17 Margin_T110">
              <span>{{ getlxinfosVal.website.site_copyright }}</span>
            </div>
          </div>
        </div>
      </transition>

    </div>
    <div class="aboutUs Color_ffffff" id="section2">
      <div class="aboutUs-1 Flex Flex_A_C">
        <div class="aboutUs-1-title"></div>
        <div class="Font_size20 Margin_L4">
          关于我们
        </div>
      </div>
      <div class="aboutUs-2 Flex Flex_A_C  Flex_J_Sb">
        <div class="aboutUs-2-l  reveal-left">
          <div class="aboutUs-2-l-title fontFamilyR Font_size44">
            <span>点工工人版介绍</span>
          </div>
          <div class="Font_size33 Color_ffffff07 lineHeight40 TextAlignJ Margin_T40">
            <span style="color: #fff;" class="jieshao">
              点工是一个兼职工作+赚取佣金奖励的二合一平台。点工-工人版提供了工人领取工作需求的平台，为老板及工人提供极大地便利。
介绍好友使用工人版，他就成了你的团队成员，团队成员通过客户端发布任务需求，推荐人可获得分享佣金。工作省事，分享赚钱，轻松工作！
            </span>
          </div>
          <div class="Font_size20 Color_ffffff07 letterSpacing1 Margin_T40">
            <span class="jieshao_title">工人的赚钱工具，老板的理想平台</span>
          </div>
        </div>
        <div class="aboutUs-2-r  reveal-right ">
          <img class="Hover_scale" style="width: 100%;height: 100%;" src="@/assets/img/home_right.png" alt="">
        </div>
      </div>
    </div>
    <div class="exhibition reveal-top" id="section3">
      <div class="exhibition-tltle Color_ffffff Flex Flex_A_C Flex_J_Sb">
        <div class="exhibition-tltle-l">
          <div class="Font_size28 fontFamilyR">
            <span>功能介绍</span>
          </div>
        </div>

      </div>
      <div class="exhibition-center Color_ffffff Flex reveal-top Flex_J_Sb Flex_W_W">
        <div class="exhibition-center-item1">
          <div class="item1-title fontFamilyR Font_size38">
            工人版APP功能介绍
          </div>
          <div class="item1-title1 Font_size24  Color_ffffff07 Margin_T30 letterSpacing1">
            主要功能分为：获取需求任务赚收益、邀请注册生钱等。
            系统会快速的匹配任务地址为中心范围内符合工作要求的工人,工人可以在工人版App中领取符合自身条件的工作，快速的达成合作。
            通过工人版领取任务能更快地完成匹配，0风险！低门槛！
          </div>
        </div>
      </div>
    </div>
    <div class="team reveal-top" id="section4" v-if="getlxinfosVal.website.team!=0">
      <div class="Text_scale fontFamilyR Font_size28">
        Our team
      </div>
      <div class="Color_ffffff fontFamilyR Font_size28">
        我们的团队
      </div>
      <div class="team-1 Margin_T60 reveal-top Color_ffffff">
        <Swiper
            :modules="[Autoplay]"
            :slides-per-view="slidesPerView"
            loop
            @swiper="onSwiper1"
        >
          <swiper-slide v-for="(item, index) in geTteaminfosVal" :key="item.id">
            <div class="team-1-item">
              <div class="team-1-item-img">
                <img :src="item.image" alt="">
              </div>
              <div class="team-1-item-title Font_size24">
                <span>{{ item.username }} <span class="Font_size16"> / {{ item.zhiwu }}</span> </span>
              </div>
              <div class="team-1-item-text Color_ffffff07 Margin_T30 Font_size18">
                {{
                  item.summary
                }}
              </div>
            </div>
          </swiper-slide>
        </Swiper>
        <div class="Swiper-l" @click="handleStart1">
          <img class="Swiper-l-img" src="@/assets/img/shang.png" alt="">
          <img class="Swiper-l-img1" src="@/assets/img/shang1.png" alt="">
        </div>
        <div class="Swiper-r" @click="handleNext1">
          <img class="Swiper-l-img" src="@/assets/img/next.png" alt="">
          <img class="Swiper-l-img1" src="@/assets/img/next1.png" alt="">
        </div>
      </div>
    </div>
    <div class="cooperative reveal-left" id="section5" v-if="getlxinfosVal.website.partner!=0">
      <div class="cooperative-1  Flex Flex_J_Sb">
        <div class="cooperative-l">
          <div class="cooperative-l-v fontFamilyR Font_size28 Text_scale">
            <span>Cooperative enterprise</span>
          </div>
          <div class="Font_size28 fontFamilyR Margin_T8 Color_ffffff">
            <span>合作伙伴</span>
          </div>
        </div>
        <div class="cooperative-r">
          <div class="cooperative-r-list">
            <div class="list-item Hover_scale" v-for="(item,index) in geThzhblistVal" :key="index">
              <img :src="item.image" alt="height">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="message " id="section6">
      <div class="message-1 Flex Flex_J_Sb">
        <!-- <div class="message-l" v-if="videourl!=''">
          <vue-plyr ref="plyr">
            <video controls>
              <source :src="videourl" type="video/mp4"/>
            </video>
          </vue-plyr>
        </div> -->
        <div class="message-r">
          <div class="message-r-t Flex Flex_J_Sb">
            <div>
              <div class="Font_size28 fontFamilyR Color_ffffff main_title">
                联系我们
              </div>
              <div class="Font_size28 fontFamilyR Text_scale main_title">
                Reservation message
              </div>
            </div>
            <!-- <div class="message-r-img">
              <img src="@/assets/logo.png" alt="">
            </div> -->
          </div>
          <div class="message-form Flex Flex_J_Sb Flex_W_W">
            <div class="message-form-item Color_ffffff Flex Flex_A_C">
              <div class="lboue Font_size17 Color_ffffff07"><span>姓 名：</span></div>
              <div class="message-form-input Font_size17"><input type="text" v-model="froms.username"/></div>
            </div>
            <div class="message-form-item Font_size17 Color_ffffff Flex Flex_A_C">
              <div class="lboue Color_ffffff07"><span>电 话：</span></div>
              <div class="message-form-input Font_size17"><input type="text" v-model="froms.tel"/></div>
            </div>
            <div class="message-form-item1 Font_size17 Color_ffffff Flex">
              <div class="lboue Color_ffffff07"><span>需求：</span></div>
              <div class="message-form-input Font_size17"><textarea type="text" v-model="froms.content"/></div>
            </div>
          </div>
          <div class="make Flex Hover_scale Flex_J_Sa Flex_A_C Font_size18 Color_ffffff07">
            <div class="make-img ">
              <img src="@/assets/img/shijian.png" alt="">
            </div>
            <span @click="PsotAddmessgeinfos" class="Margin_L4 Font_size22 ">信息提交</span>
          </div>
          <div class="message-r-posy">
            <img src="@/assets/img/yuyue.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="sharing" id="section7">
      <div class="sharing1">
        <div class="reveal-top">
          <div class="Font_size28 fontFamilyR Text_scale ">
            Case sharing
          </div>
          <div class="Font_size28 fontFamilyR Margin_T12 Color_ffffff">
            最新案例
          </div>
        </div>
        <div class="sharing-list Margin_T60 reveal-top Flex_W_W">
          <Swiper
              :modules="[Autoplay]"
              :slides-per-view="slidesPerView1"
              spaceBetween="20px"
              @swiper="onSwiper2"
          >
            <swiper-slide v-for="(item, index) in getCaselistsVal" :key="item.id">
              <div class="sharing-list-item  Hover_scale">
                <div class="sharing-list-item-img">
                  <comswiper :swiperList="item.photo"/>
                </div>
                <div class="sharing-list-item-text">
                  <div class="Color_ffffff07 Font_size20">
                    <span>{{ item.title }}</span>
                  </div>
                  <div class="Color_ffffff07 Margin_T12 Font_size17">
                    <span>{{ item.summary }}</span>
                  </div>
                  <div class="Color_ffffff07 Margin_T30 Font_size13">
                    <span>{{ item.create_time }}</span>
                  </div>
                </div>
              </div>
            </swiper-slide>
          </Swiper>
          <div class="Swiper-l" @click="handleStart2">
            <img class="Swiper-l-img" src="@/assets/img/shang.png" alt="">
            <img class="Swiper-l-img1" src="@/assets/img/shang1.png" alt="">
          </div>
          <div class="Swiper-r" @click="handleNext2">
            <img class="Swiper-l-img" src="@/assets/img/next.png" alt="">
            <img class="Swiper-l-img1" src="@/assets/img/next1.png" alt="">
          </div>
        </div>
      </div>

    </div> -->
    <div class="foot Flex reveal-top Flex_J_Sb">
      <div class="foot-l">
        <!-- <img src="@/assets/img/w11.png" alt=""> -->
        <!--<img @click="downLoad('http://hwy071.qdytcy.cn/dian_yonggong.apk')" src="@/assets/img/next.png" style="width: 200px;height: 61px;" alt="">-->
      </div>
      <div class="foot-r">
        <div class="foot-r-top Flex Flex_A_C Flex_J_Sb">
          <div class="foot-r-top-img Font_size35 Flex Flex_A_C Color_ffffff main_title">
            <!-- <img src="@/assets/img/logo1.png" alt=""> -->
            点工工人版
          </div>
          <div class="Flex Flex_A_C Color_ffffff07">
            <div class="top-t"></div>
            <div class="top-c Font_size17">
              <span>找工作  来点工</span>
            </div>
            <div class="top-t"></div>
          </div>
        </div>
        <div class="foot-r-1 Flex Flex_J_Sb Margin_T50">
          <div class="foot-r-1-l">
            <div class="foot-r-1-l-t Flex Font_size20 Color_ffffff07">
              <div class="l-t-t" @click="scrollTo('section1')"><span>首页</span></div>
              <div class="l-t-t" @click="scrollTo('section2')"><span>关于我们</span></div>
              <div class="l-t-t" @click="scrollTo('section3')"><span>功能介绍</span></div>
              <div class="l-t-t" @click="scrollTo('section6')"><span>联系我们</span></div>
              <div class="l-t-t" @click="download('http://www.dgkeji.cn/app/dg.apk')"><span>下载点工</span></div>
              <div class="l-t-t" @click="download('http://www.dgkeji.cn/app/dg-worker.apk')"><span>下载点工工人版</span></div>
            </div>
            <div class="Font_size24 Margin_T40 Color_ffffff07">
              <span>联系我们 / Contact us</span>
            </div>
            <div class="Font_size18 Margin_T30 Color_ffffff07">
              <span>13732007083 （同微信） 刘女士</span>
            </div>
            <div class="Font_size18 Margin_T14 Color_ffffff07">
              <span>公司地址: 浙江省温州市永嘉县瓯北街道柏悦嘉园</span>
            </div>
            <div class="Font_size18 Margin_T4 Color_ffffff07">
              <span>备案号: <a href="https://beian.miit.gov.cn/#/Integrated/recordQuery" target="_blank"
                               style="color: inherit; text-decoration: none;">浙ICP备2025144121号 - 4</a></span>
            </div>
          </div>
          <!-- <div class="foot-r-1-img">
            <div class="imgs">
              <img :src="getlxinfosVal.website.weixin" alt="">
            </div>
            <div class="Font_size14 Margin_T8 Color_ffffff07 Text_align">
              <span>
                加企业微信成就彼此
              </span>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home {

}

img {
  width: 100%;
  height: 100%;
}

.home-header-right-pos1 {
  width: 659px;
  position: absolute;
  top: 40%;
  left: 22%;
  transform: translate(-50%, -50%);
  z-index: 99;
  color: #fff;

  img {
    width: 659px;
    height: 533px;
  }
}

.titles {
  .en {
    display: none;
  }

  .cn {
    display: block;
  }

  &:hover {
    color: #fff;

    .en {
      display: none;
    }

    .cn {
      display: block;
    }
  }
}

.swiper-slide-home-pos {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .swiper-slide-home-pos-box {
    width: 100%;
    height: 100%;
    position: relative;

    .swiper-slide-home-pos1 {
      position: absolute;
      bottom: 0;
      left: 170px;
      width: 640px;
      z-index: 100;
    }

    .swiper-slide-home-pos-box-cl {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 100;
      width: 79px;
      height: 79px;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .swiper-slide-home-pos-box-r-tvm {
      position: absolute;
      bottom: 80px;
      right: 60px;
      width: 600px;
      z-index: 100;
      background-color: rgba(255, 255, 255, 0.4);
      padding: 40px;
      border-radius: 20px;
    }

  }
}

#video {
  width: 100%;
  height: 100%;
}

/* 动画效果 */
.slide-enter-active, .slide-leave-active {
  transition: transform 1s ease, opacity 0.5s ease;
}

.slide-enter, .slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-enter-to, .slide-leave {
  transform: translateX(0);
  opacity: 1;
}

.lujing {
  width: 46px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.6);
}

.home-header-s {
  position: absolute;
  bottom: 100px;
  left: 100px;
  z-index: 100;
}

.foot {
  padding: 106px 163px;
  background-image: url('http://hwy071.qdytcy.cn/back1.png');
  background-size: 100% 100%;

  .foot-r {
    width: 1099px;


    .foot-r-1-l {
      // width: 785px;

      .l-t-t {
        border-right: 1px solid rgba(255, 255, 255, 0.6);
        padding: 0 30px;

        &:hover {
          color: #409EFF;
          cursor: pointer;
        }

        &:nth-child(1) {
          padding: 0 30px 0 0;
        }

        &:last-child {
          border-right: none;
          padding: 0 0 0 30px;
        }
      }
    }

    .foot-r-1-img {
      .imgs {
        width: 156px;
        height: 156px;
      }
    }

    .foot-r-top {
      padding-bottom: 30px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);

      .foot-r-top-img {
        width: 278px;
        height: 32px;
      }
    }

    .top-c {
      padding: 0 10px;
    }

    .top-t {
      width: 30px;
      height: 1px;
      background-color: RGBA(255, 255, 255, 0.6);
    }
  }

  .foot-l {
    // width: 200px;
    // height:61px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 100px;
  }
}

.sharing {
  padding: 106px 163px;

  .sharing-list {
    position: relative;

    .Swiper-l {
      position: absolute;
      top: 200px;
      left: -40px;
      width: 40px;
      height: 40px;
      z-index: 100;

      .Swiper-l-img {
        display: none;
      }

      .Swiper-l-img1 {
        display: block;
      }

      &:hover {
        cursor: pointer;

        .Swiper-l-img {
          display: block;
        }

        .Swiper-l-img1 {
          display: none;
        }
      }
    }

    .Swiper-r {
      position: absolute;
      top: 200px;
      right: -40px;
      width: 40px;
      height: 40px;
      z-index: 100;

      .Swiper-l-img {
        display: none;
      }

      .Swiper-l-img1 {
        display: block;
      }

      &:hover {
        cursor: pointer;

        .Swiper-l-img {
          display: block;
        }

        .Swiper-l-img1 {
          display: none;
        }
      }
    }
  }

  .sharing-list-item {
    width: 515px;
  }

  .sharing-list-item-img {
    width: 515px;
    height: 340px;
  }

  .sharing-list-item-text {
    padding: 26px 41px;
    background-color: RGBA(48, 50, 53, 1);
  }
}

.message {
  padding: 59px 163px;

  .message-1 {
    position: relative;
    padding: 51px;
    background-color: RGBA(48, 50, 53, 1);
    border-bottom: 3px solid #409EFF;
  }

  .message-form {
    margin-top: 46px;
    gap: 30px;

    .message-form-item {
      width: 320px;
      background-color: RGBA(39, 41, 45, 1);
      padding: 0 20px;
      border-radius: 8px;
      box-sizing: border-box;

      .lboue {
        width: 60px;
      }

      .message-form-input {

        input {
          width: calc(100% - 60px);
          height: 40px;
          border: none;
          outline: none;
          background: transparent;
          padding: 0;
          margin: 0;
          font: inherit;
          color: inherit;

          input:focus {
            border: none; /* 聚焦时改变边框颜色 */
          }
        }

      }

      &:nth-child(2) {
        width: 400px;
      }
    }

    .message-form-item1 {
      margin-top: 20px;
      width: 100%;
      background-color: RGBA(39, 41, 45, 1);
      padding: 10px 20px 0;
      border-radius: 8px;
      box-sizing: border-box;

      .lboue {
        width: 100px;
      }

      textarea {
        width: calc(100% - 100px);
        border: none;
        outline: none;
        background: transparent;
        margin: 0; /* 去除外边距 */
        font: inherit; /* 继承字体样式 */
        color: inherit; /* 继承文本颜色 */
        resize: none; /* 禁用调整大小 */
        min-height: 100px; /* 设置最小高度 */
        width: 500px; /* 使文本域宽度适应容器 */
      }

      textarea:focus {
        border: none; /* 聚焦时的边框样式 */
        background: transparent; /* 聚焦时的背景色 */
      }
    }

  }

  .message-l {
    width: 690px;
    height: 450px;
    background-color: rgba(255, 255, 255, 0.1);
    position: relative;
    display: block;
  }

  .message-r {
    width: 760px;
    position: relative;

    .message-r-posy {
      position: absolute;
      bottom: -190px;
      right: -51px;
      width: 561px;
      height: 217px;
      z-index: 100;
    }

    .message-r-img {
      width: 101px;
      height: 74px;
    }

    .make {
      width: 120px;
      padding: 16px 50px;
      background: RGBA(31, 31, 35, 1);
      border-radius: 8px;
      margin-top: 80px;

      .make-img {
        width: 28px;
        height: 28px;
      }
    }
  }
}

.cooperative {
  background-color: RGBA(35, 37, 40, 1);
  //height: 790px;

  .cooperative-1 {
    padding: 106px 163px;
    height: 100%;
    // background-image: url("@/assets/img/stone.png");
    background-image: url('http://hwy071.qdytcy.cn/back1.png');
    background-size: 100% 890px;
    background-repeat: no-repeat;
  }

  .cooperative-r {
    width: 1168px;

    .cooperative-r-list {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
      justify-items: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      .list-item {
        width: 208px;
        height: 98px;
        display: flex;
        align-items: center;
      }

      .list-item1 {
        width: 84px;
        height: 84px;
        margin: 0 auto;
      }

      .list-item2 {
        width: 121px;
        height: 106px;
        margin: 0 auto;
      }
    }

  }

}

.team {
  padding: 106px 163px;
  background-color: RGBA(26, 26, 30, 1);

  .team-1 {
    position: relative;

    .Swiper-l {
      position: absolute;
      top: 200px;
      left: -40px;
      width: 40px;
      height: 40px;
      z-index: 100;

      .Swiper-l-img {
        display: none;
      }

      .Swiper-l-img1 {
        display: block;
      }

      &:hover {
        cursor: pointer;

        .Swiper-l-img {
          display: block;
        }

        .Swiper-l-img1 {
          display: none;
        }
      }
    }

    .Swiper-r {
      position: absolute;
      top: 200px;
      right: -40px;
      width: 40px;
      height: 40px;
      z-index: 100;

      .Swiper-l-img {
        display: none;
      }

      .Swiper-l-img1 {
        display: block;
      }

      &:hover {
        cursor: pointer;

        .Swiper-l-img {
          display: block;
        }

        .Swiper-l-img1 {
          display: none;
        }
      }
    }

  }

  .team-1-item {
    width: 455px;

    .team-1-item-img {
      width: 455px;
      height: 450px;
      background-image: url("@/assets/img/renb.png");
      background-size: 455px 383px;
      background-repeat: no-repeat;

    }

    .team-1-item-title {
      padding: 12px 27px;
      background-color: RGBA(222, 14, 53, 1);
    }

    .team-1-item-text {
      overflow: hidden; /* 隐藏超出内容 */
      display: -webkit-box; /* 作为弹性盒子布局 */
      -webkit-box-orient: vertical; /* 垂直方向排列 */
      -webkit-line-clamp: 3; /* 限制显示两行 */
    }
  }
}

.exhibition {
  padding: 106px 163px;
  background-color: RGBA(35, 37, 40, 1);
  background-image: url("../../assets/bg2.jpg");
  // background-image: url('http://hwy071.qdytcy.cn/back1.png');
  background-size: cover;
  background-size: 100% 890px;
  background-repeat: no-repeat;

  .exhibition-center-item {
    margin-top: 30px;
    width: 515px;
    position: relative;

    .exhibition-center-item-1 {
      width: 515px;
      height: 340px;
    }

    .exhibition-center-item-p1 {

      background-color: #409EFF;
      text-align: center;
      padding: 10px 0;
    }

    .exhibition-center-item-p {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: none;

      .exhibition-center-item-p-1 {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #409EFF;
      }

      .item-p-t {
        width: 56px;
        height: 2px;
        background-color: #fff;
        transform: rotate(145deg) translateX(-20px);
        margin: 0 auto 32px;
      }

      .item-p-n {
        width: 56px;
        height: 2px;
        background-color: #fff;
        transform: rotate(325deg) translateX(-20px);
        margin: 32px auto 0;
      }
    }

    &:hover {
      .exhibition-center-item-p {
        display: block;
      }
    }
  }

  .exhibition-center-item1 {
    margin-top: 30px;
    width: 1046px;
    height: 340px;
    background-color: RGBA(48, 50, 53, .7);
    border-bottom: 1px solid #409EFF;
    padding: 86px 62px;
    box-sizing: border-box;

    .item1-title {
      padding-bottom: 30px;
      border-bottom: 3px solid RGBA(111, 112, 114, 1);
    }

  }

  .exhibition-tltle-r-item {
    padding: 0 25px;
    border-right: 1px solid RGBA(139, 140, 141, 1);
    position: relative;
    z-index: 1100;

    &:hover {
      color: #409EFF;
    }

    &:last-child {
      border-right: none;
    }
  }
}

.aboutUs {
  padding: 123px 164px;
  // background-color: #1A1A1E;
  background-image: url("../../assets/bg.jpg");
  background-size: cover;
  overflow: hidden;
  position: relative;

  .aboutUs-2-r {
    width: 359px;
    height: 559px;
    margin-left: 350px;
  }

  .aboutUs-2-l {
    width: 839px;
  }

  .aboutUs-1 {
    .aboutUs-1-title {
      width: 40px;
      height: 1px;
      background-color: #fff;
    }
  }

  // &:after {
  //   content: "About Us";
  //   font-size: 230px;
  //   font-weight: bolder;
  //   position: absolute;
  //   bottom: -100px;
  //   left: 168px;
  //   color: rgba(37, 37, 43, 0.6);

  // }
}

.home-header {
  height: 790px;
  position: relative;
  background-color: #fff;

  .home-header-right-pod {
    position: absolute;
    top: 0;
    left: 161px;
    width: calc(100% - 161px);
    height: 100%;
    z-index: 101;
    padding: 159px 138px 266px;
    box-sizing: border-box;
    background-color: #409EFF;

    .home-header-right-pod-l {
      padding-right: 500px;
      border-right: 1px solid RGBA(255, 255, 255, 0.4);

      p {
        cursor: pointer;
      }
    }
  }
}

.home-header-right {
  width: calc(100% - 161px);
}

.home-header-left {
  width: 161px;
  background-color: #25252B;

  .left {
    padding: 60px 20px 6px;
    // background-color: #409EFF;

    .left-1 {
      width: 120px;
      height: 77px;
    }

    .left-2 {
      width: 36px;
      height: 25px;
      margin: 40px auto 20px;
    }
  }

  .cent {
    padding: 105px 0 0;

    .cent-1 {
      margin: 200px auto;
      text-indent: 3em;
      letter-spacing: 10px;
      writing-mode: vertical-rl; /* 从右到左竖排 */
    }

    .cent-2 {
      width: 2px;
      height: 58px;
      margin: 23px auto;
      background-color: #8A8A8A;
    }

    .cent-3 {
      margin-top: -103px;

      .cent-3-1 {
        margin: 0 auto;
        width: 40px;
        height: 40px;
        transform: rotate(-90deg);

        .cent-3-1-img {
          display: block;
        }

        .cent-3-1-img2 {
          display: none;
        }

        &:hover {
          .cent-3-1-img {
            display: none;
          }

          .cent-3-1-img2 {
            display: block;
          }
        }
      }

      .cent-3-2 {
        margin: 29px auto 0;
        width: 40px;
        height: 40px;
        transform: rotate(90deg);

        .cent-3-1-img {
          display: block;
        }

        .cent-3-1-img2 {
          display: none;
        }

        &:hover {
          .cent-3-1-img {
            display: none;
          }

          .cent-3-1-img2 {
            display: block;
          }
        }
      }
    }
  }
}

.home-header-right {
  position: relative;

  .home-header-peg {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
    gap: 20px;

    .home-header-peg-img {
      width: 23px;
      height: 23px;
    }
  }

  .home-header-right-pos3 {
    position: absolute;
    bottom: 110px;
    right: 61px;
    width: 30px;
    height: 65px;
    z-index: 999;
    animation: spin 2s linear infinite;

    img {
      width: 100%;
      height: 100%;
    }
  }

  @keyframes spin {
    from {
      transform: translateY(-10px);
    }
    to {
      transform: translateY(10px);
    }
  }

  .home-header-right-pos2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0 0;
    background-color: RGBA(46, 45, 48, 0.6);
    z-index: 104;
    border-bottom: 4px solid #409EFF;

    .pos2-box {
      margin: 0 auto;
    }

    .pos2-text {
      padding: 14px 77px 17px;

      &:hover {
        background: #409EFF;
      }
    }

    .pos2-text1 {
      display: none;
    }
  }

  .home-header-right-pos {
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 100;

    .home-header-right-pos-p {
      p {
        transform: skew(-10deg);
      }
    }
  }
}

.swiper-box {
  width: 100%;
  height: 100%;
  position: relative;

  .kongjian {
    position: absolute;
    bottom: 10px;
    right: 4%;
    display: flex;
    align-items: center;
    z-index: 100;
    padding: 10px;

    .kongjian-1 {
      height: 6px;
      width: 30px;
      border-radius: 100px;
      margin-right: 6px;
      cursor: pointer;
    }
  }
}

.swiper {
  width: 100%;
  height: 100%;
  position: relative;

  .swiper-slide-home {
    height: 100%;
    width: 100%;

    img {
      width: 100%;
      height: 100%;
      margin: 0; /* 去除默认边距 */
      padding: 0; /* 去除默认内边距 */
      border: 0; /* 去除默认边框 */
      display: block; /* 避免图片底部的空隙 */
    }

    .swiper-slide-home-title {
      font-size: 36px;
      font-weight: lighter;
    }

    .swiper-slide-home-desc {
      font-size: 20px;
      font-weight: lighter;
    }
  }
}

.home-header-select {
  position: absolute;
  top: 10px;
  right: 180px;
  z-index: 101;
}

@media screen and (max-width: 600px) {
  .home-header-right-pos1 {
    width: 1200px;
    position: absolute;
    top: 32%;
    left: 45%;
    transform: scale(2);
    z-index: 99;
    color: #fff;

  }
  .jieshao {
    font-size: 65px;
  }
  .exhibition-center-item1 {
    height: 840px !important;

    .item1-title1 {
      font-size: 65px !important;
    }

    .item1-title {
      font-size: 65px !important;
    }
  }
  .main_title {
    font-size: 60px !important;
  }
  .jieshao_title {
    font-size: 60px;
  }
  div {
    box-sizing: border-box;
  }
  .exhibition {
    padding: 106px 183px;
    background-color: RGBA(35, 37, 40, 1);
    // background-image: url("@/assets/img/stone.png");
    background-image: url("../../assets/bg2.jpg");
    background-size: 100% 1190px;
    background-repeat: no-repeat;

    .exhibition-tltle-l {
      & > div {
        font-size: 80px;
      }

    }

    .exhibition-center-item {
      margin-top: 30px;
      width: 615px;
      position: relative;

      .exhibition-center-item-1 {
        width: 515px;
        height: 340px;
      }

      .exhibition-center-item-p1 {
        background-color: #409EFF;
        height: 140px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .exhibition-center-item-p {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        font-size: 64px;

        .exhibition-center-item-p-1 {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-color: #409EFF;
        }

        .item-p-t {
          width: 56px;
          height: 2px;
          background-color: #fff;
          transform: rotate(145deg) translateX(-20px);
          margin: 0 auto 32px;
        }

        .item-p-n {
          width: 56px;
          height: 2px;
          background-color: #fff;
          transform: rotate(325deg) translateX(-20px);
          margin: 32px auto 0;
        }
      }

      &:hover {
        .exhibition-center-item-p {
          display: none;
        }
      }
    }

    .exhibition-center-item1 {
      margin-top: 30px;
      width: 1446px;
      height: 580px;
      background-color: RGBA(48, 50, 53, 1);
      padding: 86px 62px;
      box-sizing: border-box;

      .item1-title {
        font-size: 64px;
        padding-bottom: 30px;
        border-bottom: 3px solid RGBA(111, 112, 114, 1);
      }

      .item1-title1 {
        font-size: 44px;
      }
    }

    .exhibition-tltle-r-item {
      padding: 0 25px;
      border-right: 1px solid RGBA(139, 140, 141, 1);
      position: relative;
      z-index: 1100;
      display: none;

      &:hover {
        color: #409EFF;
      }

      &:last-child {
        border-right: none;
      }
    }
  }
  .home-header-select {
    position: absolute;
    top: 0px;
    right: 440px;
    z-index: 101;
  }
  .home-header-right {
    position: relative;

    .home-header-peg {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 100;
      gap: 20px;

      .home-header-peg-img {
        width: 80px;
        height: 80px;
      }
    }

    .home-header-right-pos3 {
      position: absolute;
      bottom: 250px;
      right: 61px;
      width: 60px;
      height: 130px;
      z-index: 999;
      animation: spin 2s linear infinite;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .home-header-right-pos2 {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 10px 60px 0;
      background-color: RGBA(46, 45, 48, 0.6);
      z-index: 104;

      .pos2-box {
        margin: 0 auto;
      }

      .pos2-text {
        padding: 17px 77px;
        font-size: 60px;
        border-right: 1px solid #fff;
        display: none;
      }

      .pos2-text1 {
        display: block;
        padding: 0px 77px;
        margin: 17px 0px;
        font-size: 60px;
        border-right: 1px solid #fff;

        &:last-child {
          border-right: none;
        }
      }

    }

    .home-header-right-pos {
      position: absolute;
      top: 100px;
      left: 100px;
      z-index: 100;

      .home-header-right-pos-p {
        p {
          transform: skew(-10deg);
        }
      }
    }
  }
  .home-header-s {
    position: absolute;
    bottom: 300px;
    left: 100px;
    z-index: 100;
    font-size: 70px;
  }
  .foot {
    padding: 106px 163px;
    background-image: url('http://hwy071.qdytcy.cn/back1.png');

    .foot-r {
      width: 100%;

      .foot-r-1-l {
        width: 1205px;

        .l-t-t {
          border-right: 1px solid rgba(255, 255, 255, 0.6);
          padding: 0 30px;

          &:nth-child(1) {
            padding: 0 30px 0 0;
          }

          &:last-child {
            border-right: none;
            padding: 0 0 0 30px;
          }
        }
      }

      .foot-r-1-img {
        width: 310px;

        .imgs {
          margin: 0 auto;
          width: 310px;
          height: 310px;
        }
      }

      .foot-r-top {
        padding-bottom: 30px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);

        .foot-r-top-img {
          width: 496px;
          height: 64px;
        }
      }

      .top-c {
        padding: 0 10px;
      }

      .top-t {
        width: 30px;
        height: 1px;
        background-color: RGBA(255, 255, 255, 0.6);
      }
    }

    .foot-l {
      width: 100%;
      height: 456px;
      // display: none;
    }
  }
  .sharing {
    margin-top: 120px;
    padding: 106px 163px;
    background-color: RGBA(37, 37, 43, 1);

    .sharing-list {
      position: relative;

      .Swiper-l {
        position: absolute;
        top: 350px;
        left: -110px;
        width: 80px;
        height: 80px;
        z-index: 100;

        .Swiper-l-img {
          display: none;
        }

        .Swiper-l-img1 {
          display: block;
        }

        &:hover {
          cursor: pointer;

          .Swiper-l-img {
            display: block;
          }

          .Swiper-l-img1 {
            display: none;
          }
        }
      }

      .Swiper-r {
        position: absolute;
        top: 350px;
        right: -110px;
        width: 80px;
        height: 80px;
        z-index: 100;

        .Swiper-l-img {
          display: none;
        }

        .Swiper-l-img1 {
          display: block;
        }

        &:hover {
          cursor: pointer;

          .Swiper-l-img {
            display: block;
          }

          .Swiper-l-img1 {
            display: none;
          }
        }
      }
    }

    .sharing-list-item {
      width: 100%;
    }

    .sharing-list-item-img {
      width: 100%;
      height: 468px;
    }

    .sharing-list-item-text {
      padding: 26px 41px;
      background-color: RGBA(48, 50, 53, 1);
    }
  }
  .team {
    padding: 106px 163px;

    .team-1 {
      position: relative;

      .Swiper-l {
        position: absolute;
        top: 350px;
        left: -80px;
        width: 80px;
        height: 80px;
        z-index: 100;

        .Swiper-l-img {
          display: none;
        }

        .Swiper-l-img1 {
          display: block;
        }

        &:hover {
          cursor: pointer;

          .Swiper-l-img {
            display: block;
          }

          .Swiper-l-img1 {
            display: none;
          }
        }
      }

      .Swiper-r {
        position: absolute;
        top: 350px;
        right: -80px;
        width: 80px;
        height: 80px;
        z-index: 100;

        .Swiper-l-img {
          display: none;
        }

        .Swiper-l-img1 {
          display: block;
        }

        &:hover {
          cursor: pointer;

          .Swiper-l-img {
            display: block;
          }

          .Swiper-l-img1 {
            display: none;
          }
        }
      }

    }

    .team-1-item {
      width: 90%;

      .team-1-item-img {
        width: 100%;
        height: 700px;
        background-image: url("@/assets/img/renb.png");
        background-size: 100% 583px;
        background-repeat: no-repeat;
      }

      .team-1-item-title {
        padding: 12px 27px;
        background-color: RGBA(222, 14, 53, 1);
      }

      .team-1-item-text {
        overflow: hidden; /* 隐藏超出内容 */
        display: -webkit-box; /* 作为弹性盒子布局 */
        -webkit-box-orient: vertical; /* 垂直方向排列 */
        -webkit-line-clamp: 3; /* 限制显示两行 */
      }
    }
  }
  .cooperative {
    padding: 106px 163px;
    background-image: url("@/assets/img/stone.png");
    background-size: 100% 890px;
    background-repeat: no-repeat;
    height: 100%;

    .cooperative-1 {
      padding: 106px 0px;
      height: 100%;
      background-image: url("@/assets/img/stone.png");
      background-size: 100% 890px;
      background-repeat: no-repeat;
    }

    .cooperative-r {
      width: 100%;

      .cooperative-r-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        justify-items: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        margin-top: 60px;

        .list-item {
          width: 416px;
          height: 196px;
          display: flex;
          align-items: center;
        }

        .list-item1 {
          width: 168px;
          height: 168px;
          margin: 0 auto;
        }

        .list-item2 {
          width: 242px;
          height: 212px;
          margin: 0 auto;
        }
      }

    }

  }

  .home-header {
    height: 2500px;
    position: relative;

    .home-header-right-pod {
      position: absolute;
      top: 0;
      left: 368px;
      width: calc(100% - 368px);
      //height: 100%;
      z-index: 101;
      display: flex;
      padding: 159px 138px 266px;
      box-sizing: border-box;
      background-color: #409EFF;

      .home-header-right-pod-l {
        padding-right: 500px;
        border-right: none;
        line-height: 200px;
        font-size: 80px;
      }
    }
  }
  .message {
    padding: 106px 163px;

    .message-1 {
      position: relative;
      padding: 0;
      background-color: RGBA(48, 50, 53, 0);
      margin-top: 0;
      border: none;
    }

    .message-form {
      .message-form-item {
        margin-top: 20px;
        width: 48%;
        background-color: RGBA(39, 41, 45, 1);
        padding: 20px 40px;
        border-radius: 8px;
        box-sizing: border-box;
        font-size: 60px;

        .lboue {
          width: 220px;
          font-size: 60px;
        }

        .message-form-input {
          input {
            width: 450px;
            height: 80px;
            border: none;
            outline: none;
            background: transparent;
            padding: 0;
            margin: 0;
            font: inherit;
            color: inherit;
            font-size: 60px;

            input:focus {
              border: none; /* 聚焦时改变边框颜色 */
            }
          }

        }

        &:nth-child(2) {
          width: 48%;
        }
      }

      .message-form-item1 {
        margin-top: 40px;
        width: 100%;
        background-color: RGBA(39, 41, 45, 1);
        padding: 10px 20px 0;
        border-radius: 8px;
        box-sizing: border-box;

        .lboue {
          width: 300px;
          font-size: 60px;
        }

        .message-form-input {
          width: calc(100% - 300px);

          textarea {
            width: 100%;
            height: 300px;
            border: none;
            outline: none;
            background: transparent;
            margin: 0; /* 去除外边距 */
            font: inherit; /* 继承字体样式 */
            color: inherit; /* 继承文本颜色 */
            resize: none; /* 禁用调整大小 */
            min-height: 100px; /* 设置最小高度 */
            font-size: 60px;
          }

          textarea:focus {
            border: none; /* 聚焦时的边框样式 */
            background: transparent; /* 聚焦时的背景色 */
          }
        }

      }

    }

    .message-l {
      width: 100%;
      height: 850px;
      background-color: rgba(255, 255, 255, 0.1);
      margin-bottom: 60px;
      display: none;
    }

    .message-r {
      width: 100%;
      position: relative;

      .message-r-posy {
        position: absolute;
        bottom: -260px;
        right: -40px;
        width: 1061px;
        height: 417px;
        z-index: 100;
      }

      .message-r-img {
        width: 193px;
        height: 142px;
      }

      .make {
        width: 390px;
        padding: 50px 50px;
        background: RGBA(31, 31, 35, 1);
        border-radius: 8px;
        margin-top: 80px;
        justify-content: center;

        .make-img {
          width: 58px;
          height: 58px;
          margin-right: 20px;
        }
      }
    }
  }

  .home-header-right {
    width: calc(100% - 372px);
    height: 100%;

    .swiper {
      width: 100%;
      height: 100%;
      position: relative;

      .swiper-slide-home {
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover; /* 确保图片按比例缩放并裁剪多余部分 */
          object-position: center; /* 显示图片的中心部分 */
        }

        .swiper-slide-home-title {
          font-size: 36px;
          font-weight: lighter;
        }

        .swiper-slide-home-desc {
          font-size: 20px;
          font-weight: lighter;
        }
      }
    }
  }

  .home-header-left {
    width: 372px;
    background-color: #25252B;

    .left {
      padding: 152px 0px 94px;
      background-color: #409EFF;

      .left-1 {
        margin: 0 auto;
        width: 282px;
        height: 204px;
      }

      .left-2 {
        width: 100px;
        height: 82px;
        margin: 104px auto 40px;
      }
    }

    .cent {
      padding: 54px 0 0;


      .cent-1 {
        margin: 0 auto;
        text-indent: 3em;
        font-size: 54px;
        letter-spacing: 30px;
        writing-mode: vertical-rl; /* 从右到左竖排 */
      }

      .cent-2 {
        width: 2px;
        height: 180px;
        margin: 70px auto;
        background-color: #8A8A8A;
      }

      .cent-3 {
        margin-top: 1304px;

        .cent-3-1 {
          margin: 0 auto;
          width: 134px;
          height: 134px;
          transform: rotate(-90deg);
        }

        .cent-3-2 {
          margin: 46px auto;
          width: 134px;
          height: 134px;
          transform: rotate(90deg);
        }
      }
    }
  }
  .aboutUs {
    padding: 123px 164px;
    overflow: hidden;
    position: relative;
    background-image: url("../../assets/bg.jpg");
    background-size: cover;

    .aboutUs-2-r {
      margin-top: 160px;
      width: 40%;
      height: 1259px;
      margin-left: 400px;
    }

    .aboutUs-2-l-title {
      margin-top: 40px;
    }

    .aboutUs-2-l {
      width: 100%;
    }

    .aboutUs-1 {
      .aboutUs-1-title {
        width: 40px;
        height: 1px;
        background-color: #fff;
      }
    }

    &:after {
      content: "About Us";
      font-size: 230px;
      position: absolute;
      bottom: -100px;
      left: 168px;
      color: rgba(37, 37, 43, 0.6);

    }
  }

}
</style>